<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            background:#0A0F23;
        }
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="vbarChart" style="width:100%;height:100%;"></div>
    <script src="../components/echarts-4.0.4.min.js"></script>
    <script>
        var vbarChart = echarts.init(document.getElementById('vbarChart'));

        var dataMap = {};

        dataMap.dataVisit = {
            //次数
            2013: [28,30,21,39,32,22,31],
            2014: [15,16,41,44,45,15,12],
            2015: [23,30,35,41,34,38,19],
            2016: [17,35,38,32,21,19,48],
            2017: [23,20,7,25,27,12,41],
            //到访人数
            1: [ 148.0, 287.0, 157.0,340.0,295.0, 20.0,20.0],
            2: [186.0,234.0, 713.0, 335.0,381.0,35.0,13.0],
            3: [232.0,232.0, 190.0, 570.0,385.0,28.0,33.0],
            4: [254.0,193.0,395.0,374.0,341.0,13.0,1.0],
            5: [186.0,363.0,464.0,346.0,259.0,32.0,9.0]
        };

        var barOption = {
            baseOption: {
                timeline: {
                    show: false,
                    axisType: 'category',
                    loop: true,
                    autoPlay: true,
                    playInterval: 1000,
                    label: {
                        normal: {
                            textStyle: {
                                color: '#fff',
                                fontSize:16
                            }
                        },
                        position: 14
                    },
                    lineStyle: {
                        color: '#fff'
                    },
                    controlStyle: {
                        show: false
                    },
                    top: 0,
                    data: [
                       '2013','2014','2015',' 2016', '2017'
                    ]
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    top:'25%',
                    containLabel: true
                },
                backgroundColor: '#0A0F23',
                xAxis: [
                    {
                        type: 'category',
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: '#fff',
                                fontSize: 16
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        data: ['户籍新政',"薪酬",'住房保\n障支持','子女入\n学服务','项目奖补', '医疗保\n健服务' ,'职称']
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        max: 50,
                          nameTextStyle: {
                            "color": "#AEA4A8",
                             verticalAlign:'bottom'
                          },
                        //interval: 10,
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                color: '#fff',
                                fontSize: 16
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: '#fff',
                                fontSize:16
                            }
                        },
                        splitLine: {
                            show: true
                        }
                    }
                ],
                series: [
                    {name: '次数', type: 'bar', barWidth: 40}
                ]
            },
            options: [
                {
                    title: {
                        text: '2013年全国区域内招才引智情况',
                        left: 'center',
                        top:'7%',
                        textStyle: {
                            color: '#fff',
                            fontSize: 22
                        }
                    },
                    series: [
                        {
                            data: dataMap.dataVisit['2013'],
                            itemStyle: {
                                normal: {
                                    color: '#0de2ff',
                                    fontSize: 16
                                }
                            }
                        }
                    ]
                },
                {
                    title: {
                        text: '2014年全国区域内招才引智情况',
                        left: 'center',
                        top:'7%',
                        textStyle: {
                            color: '#fff',
                            fontSize: 22
                        }
                    },
                    series : [
                        {
                            data: dataMap.dataVisit['2014'],
                            itemStyle: {
                                normal: {
                                    color: '#0de2ff',
                                    fontSize: 16
                                }
                            }
                        }
                    ]
                },
                {
                    title: {
                        text: '2015年全国区域内招才引智情况',
                        left: 'center',
                        top:'7%',
                        textStyle: {
                            color: '#fff',
                            fontSize: 22
                        }
                    },
                    series : [
                        {
                            data: dataMap.dataVisit['2015'],
                            itemStyle: {
                                normal: {
                                    color: '#0de2ff',
                                    fontSize: 16
                                }
                            }
                        }
                    ]
                },
                {
                    title: {
                        text: '2016年全国区域内招才引智情况',
                        left: 'center',
                        top:'7%',
                        textStyle: {
                            color: '#fff',
                            fontSize: 22
                        }
                    },
                    series : [
                        {
                            data: dataMap.dataVisit['2016'],
                            itemStyle: {
                                normal: {
                                    color: '#0de2ff',
                                    fontSize: 16
                                }
                            }
                        }
                    ]
                },
                {
                    title: {
                        text: '2017年全国区域内招才引智情况',
                        left: 'center',
                        top:'7%',
                        textStyle: {
                            color: '#fff',
                            fontSize: 22
                        }
                    },
                    series : [
                        {
                            data: dataMap.dataVisit['2017'],
                            itemStyle: {
                                normal: {
                                    color: '#0de2ff',
                                    fontSize: 16
                                }
                            }
                        }
                    ]
                }
            ]
        };

        vbarChart.setOption(barOption);
    </script>
</body>
</html>